<!--<template>-->
<!--  <div id="app">-->
<!--    <button @click="show = !show">Toggle</button>-->
<!--    <transition name="slide-fade">-->
<!--      <div v-if="show" class="box">-->
<!--        滑动淡入淡出-->
<!--      </div>-->
<!--    </transition>-->
<!--  </div>-->
<!--</template>-->


<!--<script setup lang='ts'>-->
<!--import {defineProps, defineEmits, defineExpose, ref} from 'vue'-->

<!--defineProps({})-->

<!--const emit = defineEmits([])-->

<!--defineExpose({})-->

<!--const show = ref(false);-->
<!--</script>-->

<!--<style scoped lang='less'>-->
<!--.slide-fade-enter-active, .slide-fade-leave-active {-->
<!--  transition: all 0.5s ease;-->
<!--}-->
<!--.slide-fade-enter-from, .slide-fade-leave-to {-->
<!--  transform: translateX(-100px);-->
<!--  opacity: 0;-->
<!--}-->
<!--.slide-fade-leave-active {-->
<!--  transition: all 0.5s ease-in;-->
<!--}-->
<!--.slide-fade-leave-from {-->
<!--  transform: translateX(0px);-->
<!--  opacity: 1;-->
<!--}-->
<!--.slide-fade-leave-to {-->
<!--  transform: translateX(100px);-->
<!--  opacity: 0;-->
<!--}-->
<!--.box {-->
<!--  width: 100px;-->
<!--  height: 100px;-->
<!--  background-color: #42b983;-->
<!--}-->
<!--</style>-->


<template>
  <div className="centered-container">
    <!-- 你的内容 -->
    <div>123456</div>
  </div>
</template>

<script>
export default {
  name: 'ResponsiveMargin'
}
</script>

<style>

</style>
